<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02_元素属性的操作</title>
		<!-- 元素属性操作 ：元素 固定属性 附加属性
		                  固定属性 <a href="#"></a>
						  附加属性 <input type="radio" checked/>
						  
		arrt()            必须有参----1个参数 ，功能：获取匹配元素集合中的第一个元素的指定属性值
		                                       理解：通过属性获取属性值
		                         ----2个参数 ，功能：【设置】匹配元素集合中的所有元素的指定属性值
								              理解：通过属性和属性值  设置元素
		removeArrt()        有参-------功能：移除匹配元素集合中所有元素的指定属性值
		                               理解：移除属性---元素效果消失
		
		prop()
		removeProp()
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>attr()函数与removeArrt()函数的使用</h1>
		<img src="../img/QQ图片20250318155125.gif" alt="1" id="myImg" />
		<br /><!-- 换行属性 -->
		<button id="getAttrBtn">获取属性</button>
		<button id="setAttrBtn">设置属性</button>
		<button id="removeAttrBtn">移除属性</button>
		<div id="output"></div>
		<h2>练习：attr()函数</h2>
		<button id="gbn">点击1</button>
		<button id="gbns">点击2</button>
		<button id="gbnc">点击3</button>
		<a href="#" target="_blank" download="">百度一下</a>
		<video src="oceans-clip.mp4" controls></video>
		<div id="w"></div>
		<!-- 通过jq实现功能： -->
		<script>
			$("#getAttrBtn").click(function(){
		    //通过元素上固定属性名字，获取属性值
			var q=	$("#myImg").attr("src");
			$("div").text("当前的img的路径是:"+q);
			});
			
			$("#setAttrBtn").click(function(){
				$("#myImg").attr("src","../img/QQ图片20250318155144.gif");
				$("div").text("当前的img的路径是:"+"../img/QQ图片20250318155144.gif");
			});
			//移除属性----img图片元素   src
			$("#removeAttrBtn").click(function(){
				
				$("#myImg").removeAttr("src");
				$("div").text("当前元素src属性已被清除");
			});
			//练习
			$("#gbn").click(function(){
				$("a").attr("href","https://www.baidu.com");
			});
			$("#gbns").click(function(){
				$("a").attr("download","../img/QQ图片20250318155144.gif");
			});
			$("#gbnc").click(function(){
				$("vedio").attr("autoplay","autoplay");
				$("#w").text("这是一个视频播放器")
			});
			
		</script>
	</body>
</html>